<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js和jQuery对象互转</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!--
        jQuery和js对象互转
            js     ->   jQuery
                $(js的DOM对象);
            jQuery ->   js
                jQuery对象[索引];
                jQuery对象.get(索引);

        规范：
            一般为了区分js对象变量名，前面推荐加上一个‘$’
    -->
    <script>
         $(function () {
            // JS方式，通过id属性值获取div元素
            let jsDiv = document.getElementById("div");
            alert("js对象获取："+jsDiv.innerHTML);
            
            // js对象转jQuery对象
            let $jq = $(jsDiv);
            alert("js转jQuery获取："+$jq.html());

            // jQuery方式，通过id属性获取div元素
            let $jqDiv = $("#div");
            alert("jQuery对象获取："+$jqDiv.html());

            // jQuery对象转js对象
            let js1 = $jqDiv[0];
            alert("jQuery转js方式一获取："+js1.innerHTML);

            // 通过get方法转js
            let js2 = $jqDiv.get(0);
            alert("jQuery转js方式二获取："+js2.innerHTML);


        });


    </script>
</head>

<body>
    <div id="div">我是div</div>
</body>


</html>